<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    a{
      text-decoration: none;
      color: #333333;
        padding:20px 8px;margin: 0 22px 0 0;
    }
    #app>el-aside {
        float: left;
        width: 50%;
    }
    #app>el-main {
        float: right;
        width: 50%; /* 或其他合适的宽度 */
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 400px;
    }
    .modal-content::before {
      content: "";
      display: block;
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      transform: rotate(45deg);
      background-color: #fefefe;
      border: 1px solid #888;
    }
    .modal.show {
      display: block;
    }
    .footer_links{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px 0;
        text-align: center;
        zoom: 1;
    }
    li,ul{
        list-style: none;
        margin: 0;
        padding:0;
    }
    .footer_links_list{
        float: left;
        font-size: 13px;
        margin-left: 10px;
        margin-right: 10px;
        color: #111;
    }
    footer a{
        text-decoration: none;
        color: black;
    }
    .footer_r_1{
        zoom:1;
        padding-bottom: 10px;
    }
    .footer_r_1_a{
        float: left;
        display: block;
        width: 98px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        background-color: #ff1268;
        color: #fff;
        font-size: 14px;
        border-radius: 20px;
    }
    .footer_r_words{
        padding-bottom: 6px;
    }
    .footer_r_words_word{
        float: left;
        font-size: 13px;
        color: #111;

    }
    .footer_r_words_line{
        float: left;
        padding: 0 15px;
    }
     ul {
         list-style-type: none;
         padding: 0;
     }
    li {
        margin-bottom: 10px;
    }
  </style>
</head>
<body>
<div id="app"  style=" width:1600px;margin: 0 auto;">
    <el-container>
       <el-header>header</el-header>
        <el-container>
        <el-aside width="1100px">
            <el-card style="margin-top: 20px">
                <el-row  class="center" gutter="10px">
                <el-col span="24">
                    <p style="color:#666666">共<span style="color: #ED0B75">7453</span>个商品</p>
                </el-col>
            </el-row>
            </el-card>

            <el-card style="margin: 10px 0">
                <el-row>
                    <el-col>
                        <p>城 市： 当前选中城市 <span style="background-color: #ED0B75;
                        color: white; margin: 0 0 0 6px;padding:0 8px ">全国</span></p>
                    </el-col>
                </el-row>
                <div style="margin-right:50px;">
                    <button id="toggleButton" style="float: right;">更多</button>
                </div>
                <div>
                    <span style="background-color: #ED0B75;
          color: white; margin: 0 0 0 165px;padding:0 8px; width: 400px">全部</span>
                   <!-- <div>
                    <el-col  class="array-container" id="array-container" style="margin-left:220px;" v-for="city in cityArr">
                        <span><a style="float: left">{{city}}</a></span>
                    </el-col>
                    </div>-->
                        <div id="content">
                            <el-row gutter="50px">
                                <el-col span="6"></el-col>
                                <el-col span="18" style="margin-left:220px;margin-bottom: 10px">
                                    <a href="">大连</a>
                                    <a href="">济南</a>
                                    <a href="">福州</a>
                                    <a href="">沈阳</a>
                                    <a href="">南昌</a>
                                    <a href="">佛山</a>
                                    <a href="">哈尔滨</a>
                                    <a href="">南宁</a>
                                    <a href="">无锡</a>
                                    <a href="">石家庄</a>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col span="6"></el-col>
                                <el-col span="18" style="margin-left:220px">
                                    <a href="">长春</a>
                                    <a href="">珠海</a>
                                    <a href="">常州</a>
                                    <a href="">绍兴</a>
                                    <a href="">南通</a>
                                    <a href="">贵阳</a>
                                    <a href="">嘉兴</a>
                                    <a href="">中国澳门</a>
                                    <a href="">泉州</a>
                                    <a href="">温州</a>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row>
                            <el-col>
                                <el-divider></el-divider>
                                <span style="margin-top: 10px;">分类:</span>
                                <el-row style="margin-bottom: 50px">
                                    <span style="margin: 0 0 0 165px;padding:0 8px;background-color: #ED0B75;color: white; ">全部</span>
                                    <a href="">演唱会</a>
                                    <a href="">音乐会</a>
                                    <a href="">话剧歌剧</a>
                                    <a href="">曲苑杂坛</a>
                                    <a href="">展览休闲</a>
                                    <a href="">舞蹈芭蕾</a>
                                    <a href="">体育</a>
                                    <a href="">其他</a><br>
                                    <a href="" style="margin:0 0 0 210px;padding:0 8px; margin-bottom: 50px">儿童亲子</a>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>

                        <el-row>
                            <el-col>
                                <span>时间:</span>
                                <span style="background-color: #ED0B75;
                        color: white; margin: 0 0 0 165px;padding:0 8px ">全部</span>
                                <a href="#" id="calendar-link"><i style="color: #ED0B75; margin-right: 8px" class="el-icon-date" @click=""></i>按日历</a>
                                <div id="calendar-modal" class="modal">
                                    <div class="modal-content">
                                         <--日历组件内容 -->
                                        <el-calendar v-model="value">
                                        </el-calendar>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                    </el-row>
                </div>
            </el-card>
            <el-card>
                <el-row gutter="20px" >
                    <el-col span="24">
                        <el-menu mode="horizontal"
                                 active-text-color="#ED0B75"  @select="handleSelect"
                                 background-color="white" :default-active="currentIndex">
                            <el-menu-item index="1"><i>相关度排序</i></el-menu-item>
                            <el-menu-item index="2"><i>推荐排序</i></el-menu-item>
                            <el-menu-item index="3"><i>最近开场</i></el-menu-item>
                            <el-menu-item index="4"><i>最新上架</i></el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
                <el-table v-if="currentIndex==1" :data="userArr">
                    <el-table-column>
                        <el-row  style="margin-top: 20px;" v-for="item in userArr">

                            <el-col span="6" style="margin: 0 auto">
                                <a href=""><img :src="item.imgUrl"></a>
                            </el-col>
                            <el-col span="18 ">
                                <div style="height: 30px;margin-left:120px;margin-top: 50px;">{{item.title}}<br>
                                    <div style="margin-top: 30px"><i class="el-icon-location" style="color: #ED0B75;"></i>{{item.address}}</div>
                                    <div style="margin-top: 30px"><i class="el-icon-date" style="color: #ED0B75;"></i>{{item.play_time}}</div>
                                    <div style="font-size: 16px; margin-top: 270px;"><span style="color: #ED0B75; font-size: 16px; font-weight: bold;color: #ED0B75">{{item.price}} </span>{{item.ticket_status}}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex==2" :data="music1Arr">
                    <el-table-column>
                        <el-row v-for="item in  music1Arr">
                            <el-col span="6">
                                <a href=""><img :src="item.imgUrl" width="340" height="468"></a>
                            </el-col>
                            <el-col span="18">
                                <div style="height: 30px;margin-left: 120px;margin-top: 50px ;">{{item.title}}<br>
                                    {{item.author}}
                                    <div style="margin-top: 30px;"><i class="el-icon-location" style="color: #ED0B75;"></i>{{item.address}}</div>
                                    <div style="margin-top: 30px;"><i class="el-icon-date" style="color: #ED0B75;"></i>{{item.play_time}}</div>
                                    <div style="font-size: 16px; margin-top: 230px;"><span style="color: #ED0B75; font-size: 16px; font-weight: bold;color: #ED0B75">{{item.price}} </span>{{item.ticket_status}}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex==3" :data=" music2Arr">
                    <el-table-column>
                        <el-row v-for="item in music2Arr">
                            <el-col span="6">
                                <a href=""><img :src="item.imgUrl" width="340" height="468"></a>
                            </el-col>
                            <el-col span="18">
                                <div style="height: 30px;margin-left: 120px;margin-top: 50px">{{item.title}}<br>
                                    {{item.author}}
                                    <div style="margin-top: 30px;"><i class="el-icon-location" style="color: #ED0B75;"></i>{{item.address}}</div>
                                    <div style="margin-top: 30px;"><i class="el-icon-date" style="color: #ED0B75;"></i>{{item.play_time}}</div>
                                    <div><el-button style="margin-top: 30px">{{item.seat}}</el-button></div>
                                    <div style="font-size: 16px; margin-top: 180px;"><span style="color: #ED0B75; font-size: 16px; font-weight: bold;color: #ED0B75">{{item.price}}  </span>{{item.ticket_status}}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-table-column>
                </el-table>
                <el-table v-if="currentIndex==4" :data="music3Arr">
                    <el-table-column>
                        <el-row v-for="item in  music3Arr">
                            <el-col span="6">
                                <a href=""><img :src="item.imgUrl" width="340" height="468"></a>
                            </el-col>
                            <el-col span="18">
                                <div style="height: 30px;margin-left: 120px;margin-top: 50px">{{item.title}}<br>
                                    <div style="margin-top: 30px;"><i class="el-icon-location" style="color: #ED0B75;"></i>{{item.address}}</div>
                                    <div style="margin-top: 30px;"><i class="el-icon-date" style="color: #ED0B75;"></i>{{item.play_time}}</div>
                                    <div style="font-size: 16px;margin-bottom:500px"><span style="color: #ED0B75; font-size: 16px; font-weight: bold;color: #ED0B75;">{{item.price}}  </span>{{item.ticket_status}}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-aside>
        <el-main style="width:800px">
            <el-col span="6" style="margin: 0 auto">
                <el-card style="width:500px">
                    <div>
                        <span>您可能还喜欢</span>
                        <div>
                            <el-row  v-for="item in mscArr">
                                <el-col span="10" style="margin-top: 20px">
                                    <a href=""><img :src="item.imgUrl" height="130px"></a>
                                </el-col>
                                <el-col span="14" style="margin-top: 30px">
                                    <div style="margin-bottom: 10px;"><a href="">{{item.title}}</a></div>
                                    <div>{{item.address}} </div>
                                    <div style="margin-bottom: 10px">{{item.play_time}}</div>
                                    <div style="color:  #ED0B75;">{{item.price}}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-main>
        </el-container>
        <el-footer style="background-color: #f8f8f8;height: 280px; margin:0 auto;width: 100%;">

            <div class="center" style="color: #666;text-align: center;margin:0;width: 100%" >
                <div style="height: 80px;line-height:15px;margin: 0 ">
                    <ul class="footer_links" >
                        <li class="footer_links_list"><a href="">帮助中心</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">公司介绍</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">品牌识别</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">公司大事记</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">协议及隐私政策</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">廉政举报</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">联系合作</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">招聘信息</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">防骗秘籍</a></li>

                    </ul>
                </div>
                <div style="height: 250px;margin: 10px ">
                    <el-row gutter="20">
                        <el-col span="8">
                            <img src="imgs/首页log1.jpg" style="width:167px;height: 60px ;margin:15px" >
                            <img src="imgs/二维码.jpg" style="width:87px;height: 87px;margin-right:30px">
                        </el-col>
                        <el-col span="16">
                            <div class="footer_r_1">
                                <a href="" class="footer_r_1_a">在线客服</a>
                            </div><br>


                            <ul class="footer_r_words">
                                <li class="footer_r_words_word">
                                    <a href="">京ICP证031057号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">京ICP备11043884号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">京公网安备11010502037341号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">广播电视节目制作经营许可证(京)字第02253号</a>
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    <a href="">网络文化经营许可证 京网文[2023]1649-054号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">营业性演出许可证京市演587号</a>
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights Reserved
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    违法不良信息举报电话：020-62108294

                                </li>
                            </ul>
                            <br>
                            <img src="imgs/首页电子执照.jpg " style="width: 100px;height: 30px ;float:left">
                            <img src="imgs/首页pci.jpg" style="width: 57px;height:30px ;float:left">
                            <img src="imgs/首页log1.jpg" style="width: 45px;height: 30px ;float:left">
                        </el-col>

                    </el-row>

                </div>
                <div style="height: 15px;line-height:15px;margin: 0 ">

                </div>
            </div>

        </el-footer>
    </el-container>
</div>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
    let v=new Vue({
        el:"body>div",
        data:{
         /* cityArr:[
              "上海", "北京", "杭州", "天津", "成都", "深圳", "南京", "苏州", "广州", " 武汉",
              "重庆", "西安", "长沙", "郑州", "青岛", "厦门", "合肥", "昆明", "宁波", "太原"
          ],*/
            currentIndex:"1",
          value: new Date(),
          activeNames: ['1'],
          userArr:[
            {
              "imgUrl":"imgs/相关度排序1.jpg",
              "title":"【上海】 告五人第一次新世界巡回演唱会【宇宙的有趣 AROUND THE NEW WORLD】-上海站",
              "address":"上海 | 梅赛德斯-奔驰文化中心",
              "play_time":"2023.08.04~2023.08.05",
              "price":"价格待定",
              "ticket_status":"未开售"
            },
            {

              "imgUrl":"imgs/相关度排序2.jpg",
              "title":"【上海】 Fantasy on Ice 2020 in SHANGHAI 冰上幻想上海站",
              "address":"场馆待定",
              "play_time":"时间待定",
              "price":"价格待定",
              "ticket_status":"未开售"
            },
            {

              "imgUrl":"imgs/相关度排序3.jpg",
              "title":"【上海】 BEYOND THE STREETS 大型街头文化展览—亚洲首站",
              "address":"上海 | 静安国际中心",
              "play_time":"时间待定",
              "price":"价格待定",
              "ticket_status":"未开售"
            },
            {
              "imgUrl":"imgs/相关度排序4.jpg",
              "title":"【上海】 淮海中路【魔脱宝贝秀】| 暑期特惠 | 沉浸式亲子互动近景魔法秀",
              "address":"上海 | 魔脱喜剧上海广场店",
              "play_time":"2023.07.08-07.30",
              "price":"39-288 元",
              "ticket_status":"售票中"
            },
            {
              "imgUrl":"imgs/相关度排序5.jpg",
              "title":"【上海】 坏画梦想家 chi K11美术馆",
              "address":"上海 | chi K11美术馆",
              "play_time":"2023.07.07-10.07",
              "price":"100-188 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/相关度排序6.jpg",
              "title":"【上海】 【JZ Club】Guillaume Palomba Trio&Jam Session",
              "address":"上海 | 爵士上海JZ Club",
              "play_time":"2023.07.16 周日 21:15",
              "price":"0.01 元 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/相关度排序7.jpg",
              "title":"上海】 【JZ Club】“午后Cool Jazz”Susie Wu Quintet",
              "address":"上海 | 爵士上海JZ Club",
              "play_time":"2023.07.08 周六 16:00",
              "price":"128 元",
              "ticket_status":"售票中"
            }
          ],
          music1Arr:[
            {

              "imgUrl":"imgs/推荐排序1.jpg",
              "title":"【天津】 BUBBLING&BOILING · 泡泡岛音乐与艺术节 · 京津冀站",
              "author":"艺人：林宥嘉、陈绮贞、新裤子、吴青峰、赵雷、欧阳靖、陈粒、落日飞车、She Her Her Hers、PP Krit 林祎凯",
              "address":"天津 | 天津东疆湾沙滩",
              "play_time":"2023.07.21-07.23",
              "price":"360-1380 元  ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/推荐排序2.jpg",
              "title":"【贵阳】 2023BUBBLING&BOILING ·云游音乐节x 泡泡岛音乐与艺术节 · 贵阳站",
              "author":" 艺人：八仙饭店、草东没有派对、陈婧霏、陈粒、deca joins、DIGI GHETTO、法兹乐队、I Mean Us、假假",
              "address":"贵阳 | 多彩贵州城3号广场",
              "play_time":"2023.08.12-08.13",
              "price":"298-798  元  ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/推荐排序3.jpg",
              "title":"【衢州】 “别来无恙”全明星演唱会·衢州站",
              "author":" 艺人：王心凌、汪苏泷、郁可唯",
              "address":"衢州 | 衢州市体育中心体育场",
              "play_time":"2023.08.06 周日 19:50",
              "price":"288-1088 元 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/推荐排序4.jpg",
              "title":"【国际及港澳台】 【新加坡站】蔡徐坤KUN 2023「迷」WORLD TOUR IN SINGAPORE",
              "author":"  艺人：蔡徐坤",
              "address":"国际及港澳台 | 新加坡金沙会议展览中心第五层-金沙大宴会厅",
              "play_time":"2023.07.15 周六 20:00",
              "price":"480-1880 元 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/推荐排序5.jpg",
              "title":"【上海】 DEADLINE 小鬼-王琳凯2023巡回演唱会-上海站",
              "author":"艺人：小鬼-王琳凯",
              "address":"上海 | 梅赛德斯-奔驰文化中心",
              "play_time":"2023.07.08 周六 20:00",
              "price":"520-1580 元  ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/推荐排序6.jpg",
              "title":"【厦门】 第四届鼓浪屿音乐节",
              "author":"艺人：颜人中、沈以诚、郑润泽、好妹妹、余佳运、裘德、TangoZ、左元杰、小酷Coola",
              "address":"厦门 | 鼓浪屿港仔后沙滩",
              "play_time":"2023.07.21-07.23",
              "price":"228-608 元 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/推荐排序7.jpg",
              "title":"【北京】 HOTDOG•2023北京MDSK音乐节",
              "author":"   艺人：马思唯、丹镇北京、Gali、谢帝、杨和苏、艾福杰尼、队长YoungCaptain、李大奔、KEY.L刘聪、乃万",
              "address":"北京 | 北京延庆世园公园6号门南侧",
              "play_time":"2023.07.08-07.09",
              "price":"328-898 元 ",
              "ticket_status":"售票中"
            }
          ],
          music2Arr:[
            {

              "imgUrl":"imgs/最近开场1.jpg",
              "title":"【大连】 「LOVE LIVE乐在现场」盘尼西林2022“浮生若梦”巡演-大连站",
              "author":" 艺人：盘尼西林",
              "address":"大连 | 赫兹空间(佳兆业店)",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近开场2.jpg",
              "title":"【福州】 冬日苏打 福州站",
              "author":"艺人：潮池蓝",
              "address":"福州 | 福州MAAQUU x CH8 LIVEHOUSE",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近开场3.jpg",
              "title":"【厦门】 【秀动呈献】水果星球「安全出口」2022新EP巡演 厦门站",
              "author":" 艺人：水果星球",
              "address":"厦门 | RealLive And Books",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近开场4.jpg",
              "title":"【合肥】 大型原创亲子欢乐互动舞台剧 《小丑时光机》疯狂小丑总动员",
              "author":" 艺人：盘尼西林",
              "address":"合肥 | 合肥大剧院",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近开场5.jpg",
              "title":"【天津】 珍视听-沉浸式心灵唤醒音乐会",
              "author":" 艺人：盘尼西林",
              "address":"天津 | 天津西岸春秋文化艺术厅",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近开场6.jpg",
              "title":"【西安】 声音碎片2022「迷途相聚Meet in Wandering」巡演-西安站",
              "author":"艺人：声音碎片",
              "address":"西安 | 西演SPACE·塞斯拾陆",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近开场7.jpg",
              "title":"【西安】 黑屋乐队 2022「我多想拥抱你」冬季巡演｜西安站[需持48小时核算]",
              "author":"艺人：黑屋乐队",
              "address":"西安 | 星球工厂LIVEHOUSE",
              "play_time":"时间待定",
              "seat":"可选座",
              "price":"价格待定 ",
              "ticket_status":"售票中"
            }
          ],
          music3Arr:[
            {

              "imgUrl":"imgs/最近上架1.jpg",
              "title":"【佛山】 2023連詩雅「與你相連」 巡回音乐会（顺德站）",
              "address":"佛山 | 佛山市顺德演艺中心大剧院",
              "play_time":"2023.09.10 周日 20:00",
              "price":"180-380 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近上架2.jpg",
              "title":"【天津】 沉浸式魔术沙龙秀《假如你有超能力》",
              "address":"天津 | 津湾广场中影国际影城 演剧院",
              "play_time":"2023.08.19 周六 19:30",
              "price":"81.9-180 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近上架3.jpg",
              "title":"【天津】 魔术沙龙秀|沉浸式读心体验《局·结》",
              "address":"天津 | 津湾广场中影国际影城 演剧院",
              "play_time":"2023.08.19 周六 15:30",
              "price":"81.9-180 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近上架4.jpg",
              "title":"【沈阳】 2023我们是面孔 Livehouse巡演 沈阳站",
              "address":"沈阳 | 原料库livehouse(红梅店)",
              "play_time":"2023.09.10 周日 20:00",
              "price":"198-268 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近上架5.jpg",
              "title":"【天津】 世界经典电影名曲烛光音乐会",
              "address":"天津 | 津湾广场中影国际影城 演剧院",
              "play_time":"2023.08.26 周六 19:30",
              "price":"66-300 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近上架6.jpg",
              "title":"【天津】 经典动漫烛光音乐会",
              "address":"天津 | 津湾广场中影国际影城 演剧院",
              "play_time":"2023.08.26 周六 10:30",
              "price":"66-300 元",
              "ticket_status":"售票中"
            },
            {

              "imgUrl":"imgs/最近上架7.jpg",
              "title":"【天津】 天津互动音乐会 | 棒棒糖演奏家",
              "address":"天津 | 津湾广场中影国际影城 演剧院",
              "play_time":"2023.08.12 周六 16:00",
              "price":"66-300 元",
              "ticket_status":"售票中"
            }
          ],
          mscArr:[
            {
              "imgUrl":"imgs/相关度排序1.jpg",
              "title":"【洛阳】栾川老君山·鸡冠洞山谷音乐节",
              "address":"洛阳市 | 栾川风情小镇",
              "play_time":"2023.07.21-07.22",
              "price":"158.0元起"
            },
            {
              "imgUrl":"imgs/相关度排序2.jpg",
              "title":"【开封】2023魔笛音乐节",
              "address":"开封市 | 开封汴梁草原",
              "play_time":"2023.07.22-07.23",
              "price":"169.0元起"
            },
            {
              "imgUrl":"imgs/相关度排序3.jpg",
              "title":"【西安】玩世TIME音乐节",
              "address":"西安市 | 未央区汉长城大风阁西侧",
              "play_time":"2023.07.15-07.16",
              "price":"399.0元起"
            }
          ]
        },
      methods:{
        handleChange(val) {
          console.log(val);
        },
          handleSelect(key,keyPath){
              v.currentIndex = key;
          }
      }
    })
    const calendarLink = document.getElementById("calendar-link");
    const calendarModal = document.getElementById("calendar-modal");

    calendarLink.addEventListener("click", function(event) {
      event.preventDefault(); // 阻止默认链接跳转行为
      calendarModal.classList.add("show"); // 显示日历弹框
    });

    calendarModal.addEventListener("click", function(event) {
      if (event.target === calendarModal) {
        calendarModal.classList.remove("show"); // 点击弹框外部区域，关闭弹框
      }
    });
</script>
</body>
</html>